import styled from "@emotion/styled";
import { Spin } from "antd";
import { ScrenContainer } from "../../components/lib";
import { useDocumentTitle } from "../../utils"
import { useKanbans } from "../../utils/kanban";
import { useTasks } from "../../utils/task";
import { CreateKanban } from "./create-kanban";
import { KanbanColumn } from "./kanban-column";
import { SearchPanel } from "./search-panel";
import { TaskModal } from "./task-modal";
import { useKanbanSearchParams, useProjectInUrl, useTasksSearchParams } from "./util";

export const KanbanScreen = ()=>{
    useDocumentTitle('看板列表');

    const {data:currentProject} = useProjectInUrl();
    const {data:kanbans,isLoading:kanbanIsLoading} = useKanbans(useKanbanSearchParams());
    const {isLoading:taskIsLoading} = useTasks(useTasksSearchParams());
    const isLoading = kanbanIsLoading || taskIsLoading;
    return <ScrenContainer>
        <h1>{currentProject?.name}看板</h1>
        <SearchPanel/>
        {isLoading ? <Spin size={'large'} /> : <ColumnsContainer>
            {
                kanbans?.map(kanban=><KanbanColumn kanban={kanban} key={kanban.id}/>)
            }  
            <CreateKanban/>
        </ColumnsContainer>}
        <TaskModal/>
    </ScrenContainer>
}

export const ColumnsContainer = styled.div`
display: flex;
overflow-x: scroll;
flex:1;
`